.dateRange {
  @apply w-fit relative;
  width: 234px;
  height: 30px;
  user-select: none;
  font-family: PingFang SC;
  .datePreview {
    @apply h-full flex rounded px-5 items-center justify-between cursor-pointer border border-solid;
    width: 280px;
    border: 1px solid #eeeeee;
    &.datePreviewOpen {
      & > img {
        transform: rotate(0deg);
      }
    }
    & > span {
      @apply text-sm font-medium text-main font-medium;
    }

    & > img {
      width: 14px;
      height: 14px;
    }
  }

  .datePanel {
    @apply absolute top-10 w-fit bg-white z-10 rounded overflow-hidden flex;
    padding-bottom: 10px;
    width: 672px;
    height: 292px;
    box-shadow: 8px 16px 40px 0px rgba(128, 140, 157, 0.14);
    &.panelRight {
      @apply right-0;
    }
    &.panelLeft {
      @apply left-0;
    }
    .customDateRange {
      width: 504px;
      .rdrMonthAndYearWrapper {
        @apply h-10;
      }
      .rdrDateDisplayWrapper {
        display: none;
      }
      .rdrMonthName {
        @apply text-center text-main text-sm p-1;
      }
      .rdrMonthAndYearPickers {
        display: none;
      }
    }

    .date-menu {
      @apply h-full  rounded flex;
      height: calc(100% - 58px);
      margin-top: 29px;
      padding-left: 10px;
      padding-top: 3px;
      width: 158px;
      border-right: 1px solid #eee;
      .date-menu1 {
        width: 56px;
        margin-right: 10px;
      }
      .date-menu2 {
        width: 72px;
      }
      .date-menu-item {
        @apply text-theme text-xs text-center h-6 leading-6 cursor-pointer;
        border-radius: 24px;
        background: #fff1ee;
        &:hover {
          @apply text-white bg-theme;
        }
        &:not(:first-child) {
          margin-top: 14px;
        }
        &.date-active {
          @apply bg-theme text-white;
        }
      }
    }
  }
}

.rdrDayToday {
  @apply text-theme;
  span {
    @apply text-theme;
    &::after {
      width: 2px !important;
      background: var(--theme-color) !important;
    }
  }
}
